﻿<AutoComplete Options="options" OnInput="OnInput" AllowFilter="false">
    <ChildContent>
        <AutoCompleteSearch Placeholder="input here" @bind-Value="@value" />
    </ChildContent>
    <OptionTemplate Context="option">
        <AutoCompleteOption Style="display: flex;" Value="@option.Value.Category">
            Found @option.Value.Title on
            <a style=" flex: auto; text-overflow: ellipsis; overflow: hidden;"
               href="https://s.taobao.com/search?q=@(option.Value.Title)"
               target="_blank"
               rel="noopener noreferrer">
                @option.Value.Category
            </a>
            <span style="flex: none;">@option.Value.Count results</span>
        </AutoCompleteOption>
    </OptionTemplate>
</AutoComplete>

@code{
    private string value;

    List<UncertainCategoryOption> options = new List<UncertainCategoryOption>();


    void OnInput(ChangeEventArgs e)
    {
        var v = e.Value.ToString();

        var r = new Random();
        var i = 0;
        this.options = new int[7].Select(x => new UncertainCategoryOption()
        {
            Title = v,
            Category = $"{v}{i++}",
            Count = r.Next(100, 200),
        }).ToList();
    }

    public class UncertainCategoryOption
    {
        public string Title { get; set; }

        public string Category { get; set; }
        public int Count { get; set; }
    }
}